<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>五种常见html导航栏</title>
 <style>
  /* 公共css-开始 */
  body {
   background-color: #dedede;
   margin: 0;
   color: #333;
  }


  ul {
   list-style: none;
   padding: 0;
  }

  a {
   text-decoration: none;
   color: #333;
  }

  h1,
  p {
   margin: 0;
  }

  .blank-section {
   height: 100px;
   width: 100px;
  }

  /* 公共css-结束 */

  /* 企业站-开始 */
  .topMenu {
   padding: 5px 0;
   background-color: #fefefe;
   margin: 0 auto;
   width: 1366px;
   display: grid;
   grid-template-columns: 1fr 1fr;
  }

  .left-desc {
   padding-left: 20px;
  }

  .topMenu h1 {
   font-weight: normal;
   font-size: 28px;
   margin: 0;
   color: #76af3a;
  }

  .right-menu {
   display: grid;
   grid-template-columns: repeat(4, 120px);
   gap: 20px;
   place-self: center;
  }

  .right-menu li {
   place-self: center;
  }

  .right-menu li:active {
   opacity: 0.7;
   font-weight: bold;
  }

  /* 企业站-结束 */

  /* 菜单居中-开始 */
  .middle-menu {
   background-color: #fff;
   margin: 0 auto;
   width: 1366px;
   display: grid;
   grid-template-columns: repeat(4, 120px);
   padding: 10px 0;
   height: 60px;
   place-content: center;
  }

  .middle-menu li {
   place-self: center;
  }

  .middle-menu li:active {
   opacity: 0.7;
   font-weight: bolder;
  }

  /* 菜单居中-结束 */
 </style>
</head>

<body>
 <!-- 一个html页面建议只有一个header,这里写很多个,是方便新手朋友复制粘贴 -->
 <!-- 企业站, 左文标题+副标题 右链接 -->
 <header>
  <div class="topMenu">
   <div class="left-desc">
    <h1>松蕴大胖</h1>
    <p>让每个学前端的臭宝都好运~</p>
   </div>
   <ul class="right-menu">
    <li>
     <a href="#">首页</a>
    </li>
    <li>
     <a href="#">新闻中心</a>
    </li>
    <li>
     <a href="#">服务项目</a>
    </li>
    <li>
     <a href="#">关于我们</a>
    </li>
   </ul>
  </div>
 </header>
 <!-- 企业站结束 -->

 <!-- 占位-开始 -->
 <div class="blank-section">
  <!-- 占位-结束 -->
 </div>
 <!-- 占位-结束 -->
 <!-- 菜单居中 -->
 <header>
  <ul class="middle-menu">
   <li>
    <a href="#">首页</a>
   </li>
   <li>
    <a href="#">新闻中心</a>
   </li>
   <li>
    <a href="#">服务项目</a>
   </li>
   <li>
    <a href="#">关于我们</a>
   </li>
  </ul>

 </header>
 <!-- 菜单居中-结束 -->

 <!-- 占位-开始 -->
 <div class="blank-section">
  <!-- 占位-结束 -->


  <!--左logo 中 菜单 右 登录|注册 -->
  <!-- <header>
   <div class="middle">
    <ul class="middle-menu">
     <li>
      <a href="#">首页</a>
     </li>
     <li>
      <a href="#">新闻中心</a>
     </li>
     <li>
      <a href="#">服务项目</a>
     </li>
     <li>
      <a href="#">关于我们</a>
     </li>
    </ul>
   </div>

  </header> -->
  <!-- 位于图上 -->

  <!-- 固定在顶部 -->

  <!-- 带二级链接 -->
</body>

</html>